<template>
  <view class="app-container">
    <view class="content">
      <slot></slot>
    </view>
    
    <!-- 自定义底部导航栏 -->
    <view class="tabbar">
      <view
        class="tabbar-item"
        :class="{ active: current === 0 }"
        @click="switchPage('/pages/chat/chat', 0)"
      >
        <text>聊天</text>
      </view>
      <view
        class="tabbar-item"
        :class="{ active: current === 1 }"
        @click="switchPage('/pages/user/user', 1)"
      >
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'

const current = ref(0)

// 页面切换
const switchPage = (url, index) => {
  current.value = index
  uni.switchTab({ url }) // 使用switchTab切换页面
}

// 页面加载时，判断当前路由
onMounted(() => {
  const pages = getCurrentPages()
  const currentRoute = pages[pages.length - 1]?.route
  current.value = currentRoute.includes('user') ? 1 : 0
})
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #121212;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  flex: 1;
}

.tabbar {
  display: flex;
  height: 60rpx;
  background-color: #000000;
  border-top: 1px solid #333;
}

.tabbar-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
  color: #666666;
}

.tabbar-item.active {
  color: #00ffff;
}
</style>
